<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="discrption" content="parallax one page" />
    <meta
      name="keyword"
      content="agency, business, corporate, creative, freelancer, interior, joomla template, K2 Blog, minimal, modern, multipurpose, personal, portfolio, responsive, simple"
    />
    <!-- Title -->
    <title>我的博客</title>
    <!-- Font Google -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="shortcut icon"
      href="assets/img/favicon.ico"
      type="image/x-icon"
    />
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon" />
    <!-- custom styles(optional) -->
    <link href="assets/css/plugins.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
  </head>
  <!--classic-menu-->
  <body class="dsn-effect-scroll dsn-cursor-effect dsn-ajax">
    <div class="preloader">
      <div class="preloader-bar">
        <div class="preloader-progress"></div>
      </div>
      <h1 class="title v-middle">
        <span class="percent">0</span><span class="text-strok">DARO</span
        ><span class="text-fill">DARO</span>
      </h1>
    </div>
    <div class="site-header">
      <div
        class="extend-container d-flex w-100 align-items-baseline justify-content-between align-items-end"
      >
        <div class="inner-header p-relative">
          <div class="main-logo">
            <a href="index.html" data-dsn="parallax"
              ><img
                class="dark-logo"
                src="assets/img/logo-dark.png"
                alt="" /><img
                class="light-logo"
                src="assets/img/logo.png"
                alt=""
            /></a>
          </div>
        </div>
        <div class="menu-icon d-flex align-items-baseline">
          <div class="text-menu p-relative font-heading text-transform-upper">
            <div class="p-absolute text-button">Menu</div>
            <div class="p-absolute text-open">Open</div>
            <div class="p-absolute text-close">Close</div>
          </div>
          <div class="icon-m" data-dsn="parallax">
            <span
              class="menu-icon-line p-relative d-inline-block icon-top"
            ></span
            ><span
              class="menu-icon-line p-relative d-inline-block icon-center"
            ></span
            ><span class="menu-icon-line p-relative d-block icon-bottom"></span>
          </div>
        </div>
        <nav
          class="accent-menu main-navigation p-absolute w-100 d-flex align-items-baseline"
        >
          <div class="menu-cover-title">Menu</div>
          <ul
            class="extend-container p-relative d-flex flex-column justify-content-center h-100"
          >
            <li class="dsn-active dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Home</span
                ><span class="dsn-meta-menu">01</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Home</span
                  >
                </li>
                <li>
                  <a href="index.html"
                    ><span class="dsn-title-menu">One Page 1</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="demo2.html"
                    ><span class="dsn-title-menu">One Page 2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="demo3.html"
                    ><span class="dsn-title-menu">One Page 3</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="demo-video.html"
                    ><span class="dsn-title-menu">One Page 4</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Sliders</span
                ><span class="dsn-meta-menu">02</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Sliders</span
                  >
                </li>
                <li>
                  <a href="slider2.html"
                    ><span class="dsn-title-menu">Slider Vertical</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="slider-horizontal.html"
                    ><span class="dsn-title-menu">Slider Horizontal</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="slider3.html"
                    ><span class="dsn-title-menu">Slider 3 Column</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="slider.html"
                    ><span class="dsn-title-menu">Slider slice</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Portfolio</span
                ><span class="dsn-meta-menu">03</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Portfolio</span
                  >
                </li>
                <li>
                  <a href="work.html"
                    ><span class="dsn-title-menu">Work 3 columns</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="work-2.html"
                    ><span class="dsn-title-menu">Work V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="gallery.html"
                    ><span class="dsn-title-menu">gallery</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-2.html"
                    ><span class="dsn-title-menu">Work 2 columns</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-4.html"
                    ><span class="dsn-title-menu">Work 4 columns</span
                    ><span class="dsn-meta-menu">05</span></a
                  >
                </li>
                <li>
                  <a href="work-load.html"
                    ><span class="dsn-title-menu">Work Load More</span
                    ><span class="dsn-meta-menu">06</span></a
                  >
                </li>
                <li>
                  <a href="work-4.html"
                    ><span class="dsn-title-menu">Work horizontal</span
                    ><span class="dsn-meta-menu">07</span></a
                  >
                </li>
                <li>
                  <a href="work-3.html"
                    ><span class="dsn-title-menu">Work carousel</span
                    ><span class="dsn-meta-menu">08</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">About</span
                ><span class="dsn-meta-menu">04</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >About</span
                  >
                </li>
                <li>
                  <a href="about.html"
                    ><span class="dsn-title-menu">About Us</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="about-2.html"
                    ><span class="dsn-title-menu">About Us V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Stories</span
                ><span class="dsn-meta-menu">05</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Stories</span
                  >
                </li>
                <li>
                  <a href="blog.html"
                    ><span class="dsn-title-menu">Stories</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="blog-grid.html"
                    ><span class="dsn-title-menu">Stories Grid</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="post.html"
                    ><span class="dsn-title-menu">Single Post</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Contact</span
                ><span class="dsn-meta-menu">06</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Contact</span
                  >
                </li>
                <li>
                  <a href="contact.html"
                    ><span class="dsn-title-menu">Contact</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="contact-2.html"
                    ><span class="dsn-title-menu">Contact V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
          </ul>
          <div class="container-content d-flex flex-column justify-content-end">
            <div class="nav__info">
              <div class="nav-content">
                <p class="title-line">Studio</p>
                <p>
                  26-30 New Damietta<br />
                  El-Mahalla El-Kubra,SK1 66LM
                </p>
              </div>
              <div class="nav-content">
                <p class="title-line">Contact</p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="+00 (2)012 3321"
                    class="link-hover"
                    >+00(2)012 3321</a
                  >
                </p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="info@dsngrid.com"
                    class="link-hover"
                    >info@dsngrid.com</a
                  >
                </p>
              </div>
            </div>
            <div class="nav-social">
              <div class="nav-social-inner p-relative">
                <p class="title-line">Follow us</p>
                <ul>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Dribbble.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Behance.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Linkedin.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Twitter.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="nav-border-bottom"></div>
        </nav>
      </div>
    </div>
    <main class="main-root">
      <div id="dsn-scrollbar">
        <header data-dsn-header="parallax">
          <div class="header-master">
            <div class="p-absolute w-100 h-100 over-hidden">
              <div
                class="header-scale-hero"
                data-dsn="video"
                data-overlay="2"
                id="dsn-hero-parallax-img"
                style="
                  background-image: url(https://images.unsplash.com/photo-1584853817833-aab3e985a261?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
                "
              ></div>
            </div>
            <div class="container h-100">
              <div class="row align-items-center justify-content-center h-100">
                <div
                  id="dsn-hero-parallax-title"
                  class="content p-relative text-center"
                >
                  <div class="metas meta-personal p-relative">
                    <span>we work hard,we play hard </span>
                  </div>
                  <h1 class="title">
                    We Are Digital<br />
                    Creative Studio
                  </h1>
                </div>
              </div>
            </div>
            <div class="scroll-d p-absolute animation-rotate">
              <img src="assets/img/scroll_down.svg" alt="" />
            </div>
          </div>
        </header>
        <div class="wrapper">
          <div class="container section-p section-margin p-relative">
            <div class="intro-text text-center p-relative">
              <div
                class="title-cover"
                data-dsn-grid="move-section"
                data-dsn-opacity="0.1"
                data-dsn-duration="170%"
                data-dsn-move="0%"
              >
                work
              </div>
              <div class="inner" data-dsn-animate="section">
                <h2 class="title dsn-up">Selected Works</h2>
                <h2 class="dsn-text">
                  We design and develop services for customers of all
                  sizes,specializing in creating stylish,modern websites,web
                  services and online stores.
                </h2>
              </div>
            </div>
          </div>
          <section class="our-work section-margin dsn-arrow" data-dsn-col="3">
            <div class="container-fluid">
              <div class="work-container over-hidden">
                <div class="slick-slider">
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="6"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project3/1.jpg"
                        alt=""
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project3.html"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Architecture</h5>
                        <h4>Black Apartment</h4>
                        <p>
                          Used softwares:3ds max,corona render,quixel mixer and
                          Photoshop Overall lighting HDRI,corona skylight and
                          materials created by megascans & quixel Mixer.
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="2"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project1/1.jpg"
                        alt=""
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project1.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Product</h5>
                        <h4>Diesel Watch</h4>
                        <p>
                          Vin tries to reflect Diesel’s vision and combines the
                          universe of the rock of the 80’s with a clear and
                          essential design to be more
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="5"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project4/1.jpg"
                        alt=""
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project4.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Digital Art</h5>
                        <h4>Intentional</h4>
                        <p>
                          Personal conceptual project. Reflecting on my personal
                          style of paint illustration,on what were my initial
                          ideas on it,
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="5"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project5/1.jpg"
                        alt=""
                        data-dsn-position="85%"
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project5.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Fashion,Photography</h5>
                        <h4>Blue Edition</h4>
                        <p>
                          Pink Tint Photosession for popular Model in Ukraine .
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="5"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project2/1.jpg"
                        alt=""
                        data-dsn-position="38%"
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project2.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Photography</h5>
                        <h4>Zero Untitled</h4>
                        <p>
                          A beautifully designed bike from Zero Motorcycles
                          SR/S. Huggo Eccles from Untitled Motorcycles has
                          created something spectacular to the eye.
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="5"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project6/1.jpg"
                        alt=""
                        data-dsn-position="57%"
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project6.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Photography,Photography</h5>
                        <h4>NFL Combine</h4>
                        <p>
                          Series of images used for Under Armour's NFL combine
                          authentic apparel.
                        </p>
                        <span><span>Veiw Project</span></span>
                      </a>
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="7"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project7/1.jpg"
                        alt=""
                        data-dsn-position="57%"
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project7.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Video , Architecture</h5>
                        <h4>EQUATOR CGI</h4>
                        <p>
                          Series of images used for Under Armour's NFL combine
                          authentic apparel.
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                  <div class="work-item slick-slide p-relative over-hidden">
                    <div
                      class="img-next-box p-absolute w-100 h-100"
                      data-overlay="7"
                    >
                      <img
                        class="cover-bg-img"
                        src="assets/img/project/project8/1.jpg"
                        alt=""
                        data-dsn-position="34%"
                      />
                    </div>
                    <div class="item-border p-absolute"></div>
                    <div class="item-info p-absolute">
                      <a
                        href="project8.html"
                        data-dsn-grid="move-up"
                        class="effect-ajax"
                        data-dsn-ajax="work"
                      >
                        <h5 class="cat">Photography</h5>
                        <h4>NATIVE UNION</h4>
                        <p>
                          Product Photography | NATIVE UNION Rose Collection .
                        </p>
                        <span><span>Veiw Project</span></span></a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section class="intro-about section-margin">
            <div class="container">
              <div class="row">
                <div class="col-lg-6">
                  <div class="intro-about-info">
                    <div class="section-title">
                      <span class="d-inline-block">01</span>
                      <p class="d-inline-block">WHAT We DO</p>
                      <h2>About Us</h2>
                    </div>
                    <div class="intro-about-info-bottom">
                      <h2 class="title-h2">
                        We have been doing projects since 2008.
                      </h2>
                      <p>
                        Founded in 2000,Dsn Grid has become one of the best
                        Digital Agency in ThemeForest. Blue money going
                        forward,but deploy to production.
                      </p>
                      <div class="accordion mt-30">
                        <div class="accordion__wrapper">
                          <div class="accordion__item">
                            <div
                              class="accordion__question d-flex align-items-center p-relative"
                            >
                              <span class="icon"
                                ><img src="assets/img/vision.svg" alt=""
                              /></span>
                              <h4 class="sm-title-block">Our Vision</h4>
                            </div>
                            <div class="accordion__answer">
                              <p>
                                Cepteur sint occaecat cupidatat proident,taken
                                possession of my entire soul,like these sweet
                                mornings of spring which I enjoy with my whole.
                              </p>
                            </div>
                          </div>
                          <div class="accordion__item">
                            <div
                              class="accordion__question d-flex align-items-center p-relative"
                            >
                              <span class="icon"
                                ><img src="assets/img/target.svg" alt=""
                              /></span>
                              <h4 class="sm-title-block">Our goals</h4>
                            </div>
                            <div class="accordion__answer">
                              <p>
                                Cepteur sint occaecat cupidatat proident,taken
                                possession of my entire soul,like these sweet
                                mornings of spring which I enjoy with my whole.
                              </p>
                            </div>
                          </div>
                          <div class="accordion__item">
                            <div
                              class="accordion__question d-flex align-items-center p-relative"
                            >
                              <span class="icon"
                                ><img src="assets/img/mission.svg" alt=""
                              /></span>
                              <h4 class="sm-title-block">Our Mission</h4>
                            </div>
                            <div class="accordion__answer">
                              <p>
                                Cepteur sint occaecat cupidatat proident,taken
                                possession of my entire soul,like these sweet
                                mornings of spring which I enjoy with my whole.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="box-img p-relative over-hidden">
                    <div class="bg-section p-absolute w-100 h-100">
                      <div class="h-100" data-dsn-grid="move-up">
                        <img
                          class="cover-bg-img has-top-bottom"
                          src="assets/img/about-intro.jpg"
                          alt=""
                        />
                      </div>
                    </div>
                    <img src="assets/img/about-intro.jpg" alt="" />
                    <div class="exper background-theme p-absolute">
                      <div class="numb-ex">
                        <span class="word-text">25</span>
                      </div>
                      <h4 class="sm-title-block">
                        YEARS OF <br />
                        DIGITAL EXPERIENCE
                      </h4>
                      <div class="shap-section">
                        <img src="assets/img/arr.svg" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section
            class="skills-personal background-section p-relative section-padding section-margin"
            data-dsn-animate="sections"
          >
            <div class="skills-inner container p-relative">
              <div class="container no-padding section-title-2">
                <h2>Our Skills</h2>
                <p>What we Best At</p>
              </div>
              <div class="row">
                <div class="col-lg-6">
                  <div class="box-text">
                    <h3 class="title-h2 dsn-text">
                      We provide smart and flexible digital services
                    </h3>
                    <div class="accordion">
                      <div class="accordion__wrapper">
                        <div class="accordion__item dsn-up">
                          <div class="accordion__question p-relative">
                            <h4 class="sm-title-block">
                              Website & Mobile App Design
                            </h4>
                          </div>
                          <div class="accordion__answer">
                            <p>
                              Cepteur sint occaecat cupidatat proident,taken
                              possession of my entire soul,like these sweet
                              mornings of spring which I enjoy with my whole.
                            </p>
                          </div>
                        </div>
                        <div class="accordion__item dsn-up">
                          <div class="accordion__question p-relative">
                            <h4 class="sm-title-block">
                              Motion Graphics & Animation
                            </h4>
                          </div>
                          <div class="accordion__answer">
                            <p>
                              Cepteur sint occaecat cupidatat proident,taken
                              possession of my entire soul,like these sweet
                              mornings of spring which I enjoy with my whole.
                            </p>
                          </div>
                        </div>
                        <div class="accordion__item dsn-up">
                          <div class="accordion__question p-relative">
                            <h4 class="sm-title-block">User Experience</h4>
                          </div>
                          <div class="accordion__answer">
                            <p>
                              Cepteur sint occaecat cupidatat proident,taken
                              possession of my entire soul,like these sweet
                              mornings of spring which I enjoy with my whole.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="skills-wapper">
                    <div class="skills-item">
                      <h4 class="sm-title-block">Web Design</h4>
                      <div class="bar">
                        <span class="fill" data-width="88%"
                          ><span class="number">88%</span></span
                        >
                      </div>
                      <div class="tip"></div>
                    </div>
                    <div class="skills-item">
                      <h4 class="sm-title-block">branding</h4>
                      <div class="bar">
                        <span class="fill" data-width="92%"
                          ><span class="number">92%</span></span
                        >
                      </div>
                      <div class="tip"></div>
                    </div>
                    <div class="skills-item">
                      <h4 class="sm-title-block">animation / motion</h4>
                      <div class="bar">
                        <span class="fill" data-width="80%"
                          ><span class="number">80%</span></span
                        >
                      </div>
                      <div class="tip"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section
            class="service section-margin dsn-animate"
            data-dsn-animate="section"
          >
            <div class="container section-title">
              <span class="d-inline-block">03</span>
              <p class="d-inline-block">WHAT We DO</p>
              <h2>Our Services</h2>
            </div>
            <div class="container">
              <div class="row">
                <div class="col-sm-6 service-content dsn-up">
                  <div
                    class="services-item d-flex p-relative background-section"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    ></div>
                    <div class="icon">
                      <img src="assets/img/services/graph.svg" alt="" />
                    </div>
                    <div class="content">
                      <span class="theme-color">01</span>
                      <h4 class="title-block">Media Planing</h4>
                      <p>
                        Te qui alii inermis vivendum,an decore libris eum. Te
                        mel dico alia wisi,cu vitae noluisse phaedrum.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 service-content dsn-up">
                  <div
                    class="services-item d-flex p-relative background-section"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    ></div>
                    <div class="icon">
                      <img src="assets/img/services/layout.svg" alt="" />
                    </div>
                    <div class="content">
                      <span class="theme-color">02</span>
                      <h4 class="title-block">UX Design</h4>
                      <p>
                        Te qui alii inermis vivendum,an decore libris eum. Te
                        mel dico alia wisi,cu vitae noluisse phaedrum.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 service-content dsn-up">
                  <div
                    class="services-item d-flex p-relative background-section"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    ></div>
                    <div class="icon">
                      <img src="assets/img/services/idea.svg" alt="" />
                    </div>
                    <div class="content">
                      <span class="theme-color">03</span>
                      <h4 class="title-block">Branding</h4>
                      <p>
                        Te qui alii inermis vivendum,an decore libris eum. Te
                        mel dico alia wisi,cu vitae noluisse phaedrum.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 service-content dsn-up">
                  <div
                    class="services-item d-flex p-relative background-section"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    ></div>
                    <div class="icon">
                      <img src="assets/img/services/layout.svg" alt="" />
                    </div>
                    <div class="content">
                      <span class="theme-color">04</span>
                      <h4 class="title-block">UX Design</h4>
                      <p>
                        Te qui alii inermis vivendum,an decore libris eum. Te
                        mel dico alia wisi,cu vitae noluisse phaedrum.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <div
            class="box-gallery-vertical box-gallery-content section-margin background-section"
            data-dsn="color"
          >
            <div class="mask-bg"></div>
            <div class="container section-padding">
              <div class="row align-items-center h-100">
                <div class="col-lg-6 dsn-z-index-2">
                  <div class="box-im" data-dsn-grid="move-up">
                    <img
                      class="has-top-bottom"
                      src="assets/img/project/project1/1.jpg"
                      alt=""
                      data-dsn-move="20%"
                    />
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="box-info">
                    <div
                      class="title-cover theme-color"
                      data-dsn-grid="move-section"
                      data-dsn-opacity="0.1"
                      data-dsn-duration="170%"
                      data-dsn-move="0%"
                    >
                      Droow
                    </div>
                    <div class="vertical-title" data-dsn-animate="up">
                      <h2>Diesel Watch</h2>
                    </div>
                    <div class="bg-mask-content">
                      <div class="mask-bg-2 background-main"></div>
                      <h6>
                        Sometimes,we need to check the time,wondering when our
                        work or meeting will finish,without getting caught by
                        others.
                      </h6>
                      <p>
                        Vin tries to reflect Diesel’s vision and combines the
                        universe of the rock of the 80’s with a clear and
                        essential design to be more confident with its customers
                        who need strong symbols through which express themselves
                      </p>
                    </div>
                    <div class="d-inline-block">
                      <a
                        href="#"
                        class="link-custom d-flex a-item-center p-relative"
                        ><span class="link-text">Load More</span
                        ><span class="link-circle p-absolute"
                          ><i class="fas fa-arrow-right"></i></span
                      ></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <section
            class="our-blog our-blog-classic section-margin p-relative"
            data-dsn-animate="section"
          >
            <div class="container section-title">
              <span class="d-inline-block">05</span>
              <p class="d-inline-block">Lasts post</p>
              <h2>Our News</h2>
            </div>
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-sm-6 dsn-up blog-classic-item">
                  <div
                    class="blog-item p-relative d-flex align-items-center h-100 w-100"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    >
                      <img
                        src="assets/img/blog/1.jpg"
                        alt=""
                        class="cover-bg-img"
                      />
                    </div>
                    <div class="box-content p-relative">
                      <div class="box-content-body">
                        <div class="entry-date">
                          <a href="#">March - 17th 2020</a>
                        </div>
                        <h4 class="title-block">
                          <a href="#"
                            >Will you be attending Affiliate Summit Europe?</a
                          >
                        </h4>
                        <p>
                          Lorem,ipsum dolor sit amet consectetur adipisicing
                          elit. Nulla soluta pariatur ducimus quas eaque error
                          sunt natus.
                        </p>
                        <a href="#" class="link-vist p-relative"
                          ><span class="link-vist-text">Load More</span>
                          <div class="link-vist-arrow">
                            <svg viewBox="0 0 80 80">
                              <polyline
                                points="19.89 15.25 64.03 15.25 64.03 59.33"
                              ></polyline>
                              <line
                                x1="64.03"
                                y1="15.25"
                                x2="14.03"
                                y2="65.18"
                              ></line>
                            </svg>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-6 dsn-up blog-classic-item">
                  <div
                    class="blog-item p-relative blog-item-active d-flex align-items-center h-100 w-100"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    >
                      <img
                        src="assets/img/blog/2.jpg"
                        alt=""
                        class="cover-bg-img"
                      />
                    </div>
                    <div class="box-content p-relative">
                      <div class="box-content-body">
                        <div class="entry-date">
                          <a href="#">March - 17th 2020</a>
                        </div>
                        <h4 class="title-block">
                          <a href="#"
                            >Will you be attending Affiliate Summit Europe?</a
                          >
                        </h4>
                        <p>
                          Lorem,ipsum dolor sit amet consectetur adipisicing
                          elit. Nulla soluta pariatur ducimus quas eaque error
                          sunt natus.
                        </p>
                        <a href="#" class="link-vist p-relative"
                          ><span class="link-vist-text">Load More</span>
                          <div class="link-vist-arrow">
                            <svg viewBox="0 0 80 80">
                              <polyline
                                points="19.89 15.25 64.03 15.25 64.03 59.33"
                              ></polyline>
                              <line
                                x1="64.03"
                                y1="15.25"
                                x2="14.03"
                                y2="65.18"
                              ></line>
                            </svg>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-6 dsn-up blog-classic-item">
                  <div
                    class="blog-item p-relative d-flex align-items-center h-100 w-100"
                  >
                    <div
                      class="after-bg p-absolute w-100 h-100 cover-bg"
                      data-image-src="assets/img/pattern.png"
                    >
                      <img
                        src="assets/img/blog/3.jpg"
                        alt=""
                        class="cover-bg-img"
                      />
                    </div>
                    <div class="box-content p-relative">
                      <div class="box-content-body">
                        <div class="entry-date">
                          <a href="#">March - 17th 2020</a>
                        </div>
                        <h4 class="title-block">
                          <a href="#"
                            >Will you be attending Affiliate Summit Europe?</a
                          >
                        </h4>
                        <p>
                          Lorem,ipsum dolor sit amet consectetur adipisicing
                          elit. Nulla soluta pariatur ducimus quas eaque error
                          sunt natus.
                        </p>
                        <a href="#" class="link-vist p-relative"
                          ><span class="link-vist-text">Load More</span>
                          <div class="link-vist-arrow">
                            <svg viewBox="0 0 80 80">
                              <polyline
                                points="19.89 15.25 64.03 15.25 64.03 59.33"
                              ></polyline>
                              <line
                                x1="64.03"
                                y1="15.25"
                                x2="14.03"
                                y2="65.18"
                              ></line>
                            </svg>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section
            class="testimonials-2 testimonials-3 testimonials-new section-margin"
          >
            <div
              class="container h-100 testimonials-inner background-section p-relative"
            >
              <div
                class="section-title-2"
                data-dsn-grid="move-section"
                data-dsn-move="-60"
                data-dsn-duration="100%"
                data-dsn-opacity="1"
                data-dsn-responsive="tablet"
              >
                <h2>
                  Feedback from <br />
                  our clients.
                </h2>
              </div>
              <div class="row align-items-center h-100">
                <div class="col-lg-3 col-md-4 p-0">
                  <div class="nav-container">
                    <div class="testimonials-nav">
                      <div class="testimonials-nav-item">
                        <div class="testimonials-nav-item-inner">
                          <img src="assets/img/avatar/1.jpg" alt="" />
                          <div class="info">
                            <h5>Vikinglivet</h5>
                            <h6>Founder & CEO,ABC</h6>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-nav-item">
                        <div class="testimonials-nav-item-inner">
                          <img src="assets/img/avatar/2.jpg" alt="" />
                          <div class="info">
                            <h5>Muhammad Khedr</h5>
                            <h6>Motion Designer</h6>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-nav-item">
                        <div class="testimonials-nav-item-inner">
                          <img src="assets/img/avatar/3.jpg" alt="" />
                          <div class="info">
                            <h5>Caeleth</h5>
                            <h6>Web Designer</h6>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-nav-item">
                        <div class="testimonials-nav-item-inner">
                          <img src="assets/img/avatar/4.jpg" alt="" />
                          <div class="info">
                            <h5>w0anerges</h5>
                            <h6>Founder & CEO,ABC</h6>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-nav-item">
                        <div class="testimonials-nav-item-inner">
                          <img src="assets/img/avatar/1.jpg" alt="" />
                          <div class="info">
                            <h5>yancyv8</h5>
                            <h6>Project Management</h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-9 col-md-8">
                  <div class="testimonials-main-content dsn-is-not-fade">
                    <div class="testimonials-item">
                      <div class="top-box">
                        <h5 class="sm-title-block">Customer Support</h5>
                        <p class="p-larg">
                          "I love the design, really reach details. It inspired
                          me to learn more about web design. The code quality
                          looks great as well. Can't wait to launch my site.
                          Thanks design_grid for such an awesome one. Keep it
                          up."
                        </p>
                      </div>
                    </div>
                    <div class="testimonials-item">
                      <div class="top-box">
                        <h5 class="sm-title-block">Design Quality</h5>
                        <p class="p-larg">
                          I love the design,really reach details. It inspired me
                          to learn more about web design. The code quality looks
                          great as well. Can't wait to launch my site. Thanks
                          design_grid for such an awesome one. Keep it up.
                        </p>
                      </div>
                    </div>
                    <div class="testimonials-item">
                      <div class="top-box">
                        <h5 class="sm-title-block">Design Quality</h5>
                        <p class="p-larg">
                          Absolutely happy with the slick design and customer
                          support! Suggestion: the theme could do with a little
                          more customization, like different font types for
                          instance and social sharing options under each post
                          for easy sharing
                        </p>
                      </div>
                    </div>
                    <div class="testimonials-item">
                      <div class="top-box">
                        <h5 class="sm-title-block">Customer Support</h5>
                        <p class="p-larg">
                          This is not only a cool theme, that helped me quickly
                          create a website that looks much more expensive than
                          what it costs, but also technical support. When I
                          encountered some difficulties in setting up a theme,
                          the guys supported me and did everything so that I
                          could solve my problems.
                        </p>
                      </div>
                    </div>
                    <div class="testimonials-item">
                      <div class="top-box">
                        <h5 class="sm-title-block">Customer Support</h5>
                        <p class="p-larg">
                          I browse Themeforest looking for new ways to revamp my
                          site all the time. I came across this one for its
                          looks and purchased it right away. I had a few issues
                          early but the support team made sure to help in a very
                          timely manner and now I'm more than satisfied.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <div class="contact-up p-relative section-margin">
          <div class="container">
            <div class="">
              <div class="c-wapp p-relative section-padding text-center">
                <div class="section-bg p-absolute w-100 h-100"></div>
                <a href="contact.html" class="effect-ajax"
                  ><span class="title hiring" data-dsn-content="We are hiring"
                    >We are hiring</span
                  ><span class="career theme-color"
                    >Dare and contact us immediately!</span
                  ></a
                >
              </div>
            </div>
          </div>
        </div>
        <footer class="footer-1 p-relative background-section">
          <div class="container">
            <div class="footer-links p-relative">
              <div class="row">
                <div class="col-lg-3 col-md-6 footer-block-inner">
                  <div class="footer-block">
                    <div class="footer-logo">
                      <a href=""
                        ><img
                          src="assets/img/logo.png"
                          alt=""
                          class="logo-dark" /><img
                          src="assets/img/logo-dark.png"
                          alt=""
                          class="logo-light"
                      /></a>
                    </div>
                    <div class="textwidget">
                      <p>
                        We support programs that create advancement
                        opportunities for people.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-md-6 footer-block-inner">
                  <div class="footer-block col-menu">
                    <h4 class="footer-title">Follow us</h4>
                    <div class="footer-social p-relative">
                      <ul>
                        <li class="over-hidden">
                          <a
                            href="#"
                            data-dsn="parallax"
                            target="_blank"
                            rel="nofollow"
                            >Dribbble.</a
                          >
                        </li>
                        <li class="over-hidden">
                          <a
                            href="#"
                            data-dsn="parallax"
                            target="_blank"
                            rel="nofollow"
                            >Behance.</a
                          >
                        </li>
                        <li class="over-hidden">
                          <a
                            href="#"
                            data-dsn="parallax"
                            target="_blank"
                            rel="nofollow"
                            >Twitter.</a
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-md-6 footer-block-inner">
                  <div class="footer-block col-contact">
                    <h4 class="footer-title">Contact</h4>
                    <p><strong>T</strong><span>:</span>+001 225 3351</p>
                    <p><strong>F</strong><span>:</span>+001 225 3351</p>
                    <p class="over-hidden">
                      <strong>E</strong><span>:</span
                      ><a
                        class="link-hover"
                        data-hover-text="info@dsngrid.com"
                        href="#"
                        >info@dsngrid.com</a
                      >
                    </p>
                  </div>
                </div>
                <div class="col-lg-3 col-md-6 footer-block-inner">
                  <div class="col-address">
                    <h4 class="footer-title">Address</h4>
                    <p>
                      El-Mahalla El-Kubra 37<br />
                      1776 Damietta<br />
                      Egypt
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer-nav">
            <div class="container">
              <ul>
                <li>
                  <a class="link-hover" data-dsn="parallax" href="#">Home</a>
                </li>
                <li>
                  <a class="link-hover" data-dsn="parallax" href="#"
                    >Portfolio</a
                  >
                </li>
                <li>
                  <a class="link-hover" data-dsn="parallax" href="#">About</a>
                </li>
                <li>
                  <a class="link-hover" data-dsn="parallax" href="#">News</a>
                </li>
                <li>
                  <a class="link-hover" data-dsn="parallax" href="#">Contact</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="copyright">
            <div class="text-center">
              <p>© 2020 Daro Digital Agency</p>
              <div class="copright-text over-hidden">
                Designed by
                <a
                  class="link-hover"
                  data-hover-text="DSN Grid"
                  href="#"
                  target="_blank"
                  >DSN Grid</a
                >
              </div>
            </div>
          </div>
        </footer>
      </div>
    </main>
    <div class="cursor">
      <div class="cursor-helper">
        <span class="cursor-drag">Drag</span
        ><span class="cursor-view">View</span
        ><span class="cursor-open"><i class="fas fa-plus"></i></span
        ><span class="cursor-close">Close</span
        ><span class="cursor-play">play</span
        ><span class="cursor-next"><i class="fas fa-arrow-right"></i></span
        ><span class="cursor-prev"><i class="fas fa-arrow-left"></i></span>
      </div>
    </div>
    <div class="scroll-to-top">
      <img src="assets/img/scroll_top.svg" alt="" />
      <div class="box-numper"><span>10%</span></div>
    </div>
    <div class="day-night">
      <div class="night active" data-dsn-theme="dark">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <rect x="12.3" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="16.1"
            y="15.3"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.8871 16.5732)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="12.3" width="1" height="2.6"></rect>
          <rect
            x="30.1"
            y="16.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.5145 27.0538)"
            width="2.6"
            height="1"
          ></rect>
          <rect x="33.1" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="30.9"
            y="30.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.9952 31.4264)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="33.1" width="1" height="2.6"></rect>
          <rect
            x="15.3"
            y="30.9"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.3677 20.9457)"
            width="2.6"
            height="1"
          ></rect>
          <path
            d="M24,18.7c-2.9,0-5.3,2.4-5.3,5.3s2.4,5.3,5.3,5.3s5.3-2.4,5.3-5.3S26.9,18.7,24,18.7z M24,28.3c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3s4.3,1.9,4.3,4.3S26.4,28.3,24,28.3z"
          ></path>
        </svg>
      </div>
      <div class="moon" data-dsn-theme="night">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <path
            d="M24,33.9c-5.4,0-9.9-4.4-9.9-9.9c0-4.3,2.7-8,6.8-9.4l0.8-0.3l-0.1,0.9c-0.2,0.6-0.2,1.3-0.2,1.9c0,5.2,4.3,9.5,9.5,9.5c0.6,0,1.3-0.1,1.9-0.2l0.8-0.2L33.3,27C32,31.1,28.3,33.9,24,33.9z M20.4,15.9c-3.2,1.4-5.3,4.5-5.3,8.1c0,4.9,4,8.9,8.9,8.9c3.6,0,6.7-2.1,8.1-5.3c-0.4,0-0.8,0.1-1.3,0.1c-5.8,0-10.5-4.7-10.5-10.5C20.4,16.7,20.4,16.3,20.4,15.9z"
          ></path>
        </svg>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/dsn-grid.js"></script>
    <script src="assets/js/custom.js"></script>
  </body>
</html>
